<template>
  <div>
    <h2>Child</h2>
    <!-- {{ msg }} -->
    {{ props.msg }}
    <button @click="handleClick">给父组件传递数据</button>
  </div>
</template>

<script>
// export default {
//   props: ['msg'],
//   // props: {
//   //   msg: {
//   //     type: String,
//   //     default: '默认值',
//   //   },
//   // },
//   emits: ['click'],
//   // methods: {
//   //   handleClick() {
//   //     this.$emit('click', '子组件的数据');
//   //   },
//   // },
//   // created() {
//   //   console.log('create--' + this.msg);
//   // },
//   setup(props, context) {
//     console.log(props);
//     console.log(context);
//     // console.log('setup--' + props.msg);
//     const handleClick = () => {
//       context.emit('click', '子组件的数据');
//     };
//     return {
//       handleClick,
//     };
//   },
// };
</script>

<script setup>
import { defineProps, defineEmits } from 'vue';
// const props = defineProps(['msg'])
const props = defineProps({
  msg: {
    type: String,
    default: '默认值',
  },
});

// const emit = defineEmits(['click']);
const emit = defineEmits({
  click(title) {
    if (title) {
      return true;
    } else {
      console.log('请输入title参数');
      return false;
    }
  },
});

const handleClick = () => {
  // emit('click');
  emit('click', '子组件的数据');
};
</script>

<style lang="scss" scoped></style>
